<header class="px-4 sm:px-6 lg:px-8"></header>
<main class="px-4 py-20 sm:px-6 lg:px-8">
  <div class="max-w-2xl mx-auto">
    <.flash kind={:info} title="Success!" flash={@flash} />
    <.flash kind={:error} title="Error!" flash={@flash} />
    <.flash
      id="disconnected"
      kind={:error}
      title="We can't find the internet"
      close={false}
      autoshow={false}
      phx-disconnected={show("#disconnected")}
      phx-connected={hide("#disconnected")}
    >
      Attempting to reconnect <Heroicons.arrow_path class="inline w-3 h-3 ml-1 animate-spin" />
    </.flash>
    <%= @inner_content %>
  </div>
</main>
